<template>
  <div class="dashboard-editor-container">

    <template v-if="false">
      <IndexStatistics :statistics-data="statisticsData" />

      <div class="charts-nav">
        <div id="container" style="height: 300px" />
      </div>

    </template>

  </div>
</template>

<script>
import IndexStatistics from '@/components/IndexStatistics/index.vue'
import { queryHomeIndex, queryHomeList } from '@/api/index'
import { percentageNewIntl, twoDigitsNewIntl } from '@/utils/numberNewIntl'
import { Line } from '@antv/g2plot'

export default {
  name: 'Index',
  components: {
    IndexStatistics
  },
  data() {
    return {
      statisticsData: {},
      list: [
        {
          'symbol': 'China',
          'year': '2000',
          'gdp': 1211346869605.24
        },
        {
          'symbol': 'China',
          'year': '2001',
          'gdp': 1339395718865.3
        },
        {
          'symbol': 'China',
          'year': '2002',
          'gdp': 1470550015081.55
        },
        {
          'symbol': 'China',
          'year': '2003',
          'gdp': 166028795662.68
        },
        {
          'symbol': 'United States',
          'year': '2000',
          'gdp': 13814611414000
        },
        {
          'symbol': 'United States',
          'year': '2001',
          'gdp': 1445185850000
        },
        {
          'symbol': 'United States',
          'year': '2002',
          'gdp': 1471284084000
        },
        {
          'symbol': 'United States',
          'year': '2003',
          'gdp': 14448933025000
        }
      ],
      listNew: [
        {
          'symbol': 'China',
          'year': '2000',
          'gdp': 1211346869605.24
        },
        {
          'symbol': 'China',
          'year': '2001',
          'gdp': 1339395718865.3
        },
        {
          'symbol': 'China',
          'year': '2002',
          'gdp': 1470550015081.55
        },
        {
          'symbol': 'China',
          'year': '2003',
          'gdp': 166028795662.68
        },
        {
          'symbol': 'China',
          'year': '2004',
          'gdp': 1668795662.68
        },
        {
          'symbol': 'United States',
          'year': '2000',
          'gdp': 13814611414000
        },
        {
          'symbol': 'United States',
          'year': '2001',
          'gdp': 1445185850000
        },
        {
          'symbol': 'United States',
          'year': '2002',
          'gdp': 1471284084000
        },
        {
          'symbol': 'United States',
          'year': '2003',
          'gdp': 14448933025000
        },
        {
          'symbol': 'United States',
          'year': '2004',
          'gdp': 144433025000
        }
      ]
    }
  },
  created() {
    // this.queryStatistics()
    // this.init()
  },
  mounted() {
    // this.initRegisterChart()
  },
  methods: {
    initRegisterChart() {
      // 初始化图表实例
      const line = new Line('container', {
        data: this.list,
        padding: 'auto',
        xField: 'year',
        yField: 'gdp',
        seriesField: 'symbol',
        xAxis: {
          // type: 'timeCat',
          tickCount: 5
        },
        smooth: true,
        animation: {
          appear: {
            animation: 'path-in',
            duration: 2000
          }
        }
      })
      line.render()

      setTimeout(() => {
        line.changeData(this.listNew)
      }, 3000)
    },
    async queryStatistics() {
      const data = await queryHomeIndex()
      this.statisticsData = data
    },
    async init() {
      this.loading = true
      const res = await queryHomeList({
        ...this.queryPage,
        ...this.queryParams,
        ...this.queryTimeRange
      })
      res.data.forEach(e => {
        const {
          tap_rate,
          coin_order_finish_percent,
          vip_order_finish_percent,
          total_money,
          invest_money,
          new_pay_coin_money,
          new_pay_vip_money
        } = e
        e.tap_rate = percentageNewIntl(tap_rate)
        e.coin_order_finish_percent = percentageNewIntl(coin_order_finish_percent)
        e.vip_order_finish_percent = percentageNewIntl(vip_order_finish_percent)
        e.addPayMoney = twoDigitsNewIntl(Number(new_pay_coin_money) + Number(new_pay_vip_money))

        if (invest_money === '0.00') e.ROI = 0
        else e.ROI = twoDigitsNewIntl(Number(total_money) / Number(invest_money))
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  position: relative;
}
.charts-nav {
  padding: 60px 0;
}
</style>
